---
title: ThreadPrimitive
---

A conversation between a user and an assistant.

import { ParametersTable } from "@/components/docs";

## Anatomy

```tsx
import { ThreadPrimitive } from "@assistant-ui/react";

const Thread = () => (
  <ThreadPrimitive.Root>
    <ThreadPrimitive.Viewport>
      <ThreadPrimitive.Empty>...</ThreadPrimitive.Empty>
      <ThreadPrimitive.Messages components={...} />
    </ThreadPrimitive.Viewport>
    <Composer />
  </ThreadPrimitive.Root>
);
```

## API Reference

### Root

Containts all parts of the thread.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="ThreadPrimitiveRootProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>

### Viewport

The scrollable area containing all messages. Anchors scroll to the bottom as new messages are added.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="ThreadPrimitiveViewportProps"
  parameters={[
    {
      name: "asChild",
    },
    {
      name: "autoScroll",
      type: "boolean",
      default: "true",
      description:
        "Whether to automatically scroll to the bottom of the viewport when new messages are added while the viewport is was previously scrolled to the bottom.",
    },
  ]}
/>

### Messages

Renders all messages. This primitive renders a separate component for each message.

<ParametersTable
  type="ThreadPrimitiveMessagesProps"
  parameters={[
    {
      name: "components",
      type: "MessageComponents",
      description: "The component to render for each message.",
      children: [
        {
          type: "MessageComponents",
          parameters: [
            {
              name: "Message",
              type: "ComponentType",
              description: "The component to render for each message.",
            },
            {
              name: "UserMessage",
              type: "ComponentType",
              description: "The component to render for user messages.",
            },
            {
              name: "EditComposer",
              type: "ComponentType",
              description:
                "The component to render for user messages that are being edited.",
            },
            {
              name: "AssistantMessage",
              type: "ComponentType",
              description: "The component to render for assistant messages.",
            },
          ],
        },
      ],
    },
  ]}
/>

### Empty

Renders children only when there are no messages.

### ScrollToBottom

A button to scroll the viewport to the bottom. Disabled when the viewport is already at bottom.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="ThreadPrimitiveScrollToBottomProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>

### `ThreadPrimitive.Suggestion`

Shows a suggestion to the user. When the user clicks on the suggestion, the composer's value is set to the suggestion's prompt.

This primitive renders a `<button>` element unless `asChild` is set.

```tsx
import { ThreadPrimitive } from "@assistant-ui/react";

const Suggestion = () => {
  return (
    <ThreadPrimitive.Suggestion
      prompt="I need help with product search"
      method="replace"
      autoSend
    />
  );
};
```

<ParametersTable
  type="ThreadPrimitiveSuggestionProps"
  parameters={[
    {
      name: "prompt",
      type: "string",
      description: "The suggestion's prompt.",
    },
    {
      name: "method",
      type: "'replace'",
      description:
        "How does the suggestion interact with the composer's existing value.",
    },
    {
      name: "autoSend",
      type: "boolean",
      description:
        "Whether to automatically send the suggestion when the user clicks on it.",
      default: "false",
    },
  ]}
/>

### If

Renders children if a condition is met.

<ParametersTable
  type="ThreadPrimitiveIfProps"
  parameters={[
    {
      name: "empty",
      type: "boolean | undefined",
      description: "Render children if the thread is empty.",
    },
    {
      name: "running",
      type: "boolean | undefined",
      description: "Render children if the thread is running.",
    },
  ]}
/>

```tsx
<Thread.If empty>
  {/* equivalent to <Thread.Empty> */}
</Thread.If>
<Thread.If empty={false}>
  {/* rendered if thread is not empty */}
</Thread.If>
```
